<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>视频回放 - iPad适配</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2878267_rd7xl5u0kck.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    
    body {
      background-color: #f0f4f8;
      color: #303133;
      min-height: 100vh;
      overflow-x: hidden;
    }
    
    .ipad-container {
      max-width: 1024px;
      margin: 0 auto;
      background: linear-gradient(135deg, #f0f4f8 0%, #d7e3f0 100%);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    
    /* 顶部导航栏样式 */
    .nav-tabs {
      display: flex;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(228, 232, 236, 0.8);
      padding: 0;
      position: relative;
      z-index: 20;
    }
    
    .nav-tabs::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #3498db, #2c82c9, #1abc9c);
      z-index: 1;
    }
    
    .nav-tab {
      padding: 16px 24px;
      font-size: 16px;
      font-weight: 500;
      color: #606266;
      position: relative;
      cursor: pointer;
      transition: all 0.3s;
      text-align: center;
      flex: 1;
    }
    
    .nav-tab.active {
      color: #409EFF;
      font-weight: 600;
    }
    
    .nav-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: #409EFF;
      border-radius: 3px 3px 0 0;
    }
    
    .nav-tab-icon {
      margin-right: 8px;
      font-size: 18px;
      vertical-align: middle;
    }
    
    /* 系统标题样式 - 美化版 */
    .system-title {
      text-align: center;
      padding: 24px;
      position: relative;
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(228, 232, 236, 0.8);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .title-center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 1;
    }
    
    .subtitle {
      font-size: 14px;
      color: #7f8c8d;
      font-weight: 500;
      letter-spacing: 1px;
      margin-bottom: 6px;
      text-transform: uppercase;
    }
    
    .main-title {
      font-size: 26px;
      font-weight: 700;
      color: #2c3e50;
      position: relative;
      padding: 0 15px;
    }
    
    .main-title::before,
    .main-title::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 30px;
      height: 2px;
      background: linear-gradient(90deg, #3498db, rgba(52, 152, 219, 0));
      transform: translateY(-50%);
    }
    
    .main-title::before {
      left: -20px;
    }
    
    .main-title::after {
      right: -20px;
      background: linear-gradient(90deg, rgba(52, 152, 219, 0), #3498db);
    }
    
    /* 连接状态样式 */
    .connection-status {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.8);
      font-size: 14px;
      color: #606266;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(228, 232, 236, 0.8);
      z-index: 5;
    }
    
    .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #67c23a;
      box-shadow: 0 0 8px #67c23a;
      animation: pulse 1.5s infinite;
    }
    
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.6);
      }
      70% {
        box-shadow: 0 0 0 6px rgba(103, 194, 58, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(103, 194, 58, 0);
      }
    }
    
    .main-content {
      flex: 1;
      padding: 20px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    /* 视频播放器样式 */
    .video-player-section {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      border-left: 4px solid #409EFF;
      margin-bottom: 20px;
    }
    
    .player-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(228, 232, 236, 0.8);
      background: rgba(255, 255, 255, 0.8);
    }
    
    .player-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .player-title i {
      color: #409EFF;
      font-size: 20px;
    }
    
    .playback-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f5f7fa;
      padding: 6px 12px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }
    
    .playback-label {
      font-size: 14px;
      color: #606266;
      white-space: nowrap;
    }
    
    .player-wrapper {
      position: relative;
      min-height: 400px;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .video-element {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    
    .loading-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      gap: 12px;
      z-index: 10;
    }
    
    .loading-icon {
      width: 32px;
      height: 32px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top: 3px solid #fff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .frame-controls {
      position: absolute;
      bottom: 70px;
      left: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(0, 0, 0, 0.6);
      padding: 8px;
      border-radius: 8px;
      z-index: 5;
    }
    
    .frame-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #409EFF;
      border: none;
      border-radius: 4px;
      color: white;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .frame-btn:hover {
      background: #66b1ff;
    }
    
    .video-info-panel {
      background: #f5f7fa;
      padding: 16px 20px;
      border-top: 1px solid rgba(228, 232, 236, 0.8);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }
    
    .info-item {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    
    .info-label {
      font-size: 13px;
      color: #909399;
    }
    
    .info-value {
      font-size: 14px;
      font-weight: 500;
      color: #303133;
      word-break: break-all;
    }
    
    /* 视频列表样式 */
    .video-list-section {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      border-left: 4px solid #67c23a;
      flex: 1;
    }
    
    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid rgba(228, 232, 236, 0.8);
      background: rgba(255, 255, 255, 0.8);
    }
    
    .list-title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .list-title i {
      color: #67c23a;
      font-size: 20px;
    }
    
    .list-actions {
      display: flex;
      gap: 10px;
    }
    
    .action-btn {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: none;
      transition: all 0.3s;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }
    
    .action-btn.primary {
      background: linear-gradient(135deg, #409EFF 0%, #36acfe 100%);
      color: white;
    }
    
    .action-btn.primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(64, 158, 255, 0.3);
    }
    
    .action-btn.info {
      background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
      color: white;
    }
    
    .action-btn.info:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(144, 147, 153, 0.3);
    }
    
    .record-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 20px;
      background: #f5f7fa;
      border-bottom: 1px solid rgba(228, 232, 236, 0.8);
      flex-wrap: wrap;
    }
    
    .player-input {
      border: 1px solid #dcdfe6;
      border-radius: 6px;
      padding: 8px 12px;
      font-size: 14px;
      color: #606266;
      width: 180px;
      transition: all 0.3s;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }
    
    .player-input:focus {
      border-color: #409EFF;
      outline: none;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }
    
    .record-btn {
      padding: 8px 16px;
      border-radius: 6px;
      background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
      color: white;
      border: none;
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 4px 8px rgba(103, 194, 58, 0.2);
    }
    
    .record-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(103, 194, 58, 0.3);
    }
    
    .record-tag {
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      background: rgba(103, 194, 58, 0.1);
      color: #67c23a;
      border: 1px solid rgba(103, 194, 58, 0.2);
      display: inline-block;
      flex: 1;
      white-space: normal;
      line-height: 1.4;
    }
    
    .video-list-wrapper {
      flex: 1;
      overflow-y: auto;
      padding: 10px;
      max-height: 400px;
    }
    
    .empty-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
      color: #909399;
      font-size: 14px;
    }
    
    .empty-icon {
      font-size: 48px;
      color: #dcdfe6;
      margin-bottom: 15px;
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      border-radius: 8px;
      overflow: hidden;
      font-size: 14px;
      table-layout: fixed;
    }
    
    thead {
      background-color: #f5f7fa;
      color: #606266;
      position: sticky;
      top: 0;
      z-index: 2;
    }
    
    th, td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #ebeef5;
    }
    
    th {
      font-weight: 600;
    }
    
    th:nth-child(1) {
      width: 30%;
    }
    
    th:nth-child(2), th:nth-child(3) {
      width: 15%;
    }
    
    th:nth-child(4) {
      width: 25%;
    }
    
    th:nth-child(5) {
      width: 15%;
    }
    
    tbody tr:nth-child(even) {
      background-color: #fafafa;
    }
    
    tbody tr:hover {
      background-color: #f0f7ff;
      cursor: pointer;
    }
    
    .video-info {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
      padding: 8px 0;
    }
    
    .video-icon {
      color: #409EFF;
      font-size: 16px;
      flex-shrink: 0;
    }
    
    .video-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 160px;
      display: inline-block;
      line-height: 1.4;
      flex: 1;
    }
    
    .playing-tag {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      background: #67c23a;
      color: white;
    }
    
    .video-actions {
      display: flex;
      gap: 8px;
      justify-content: center;
    }
    
    .video-action-btn {
      color: #409EFF;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 14px;
      padding: 2px 8px;
      transition: all 0.2s;
    }
    
    .video-action-btn:hover {
      background: rgba(64, 158, 255, 0.1);
      border-radius: 4px;
    }
    
    .video-action-btn.danger {
      color: #f56c6c;
    }
    
    .video-action-btn.danger:hover {
      background: rgba(245, 108, 108, 0.1);
    }
    
    .pagination-container {
      display: flex;
      justify-content: flex-end;
      padding: 16px 20px;
      border-top: 1px solid rgba(228, 232, 236, 0.8);
      background: white;
    }
    
    .pagination {
      display: flex;
      gap: 5px;
    }
    
    .page-btn {
      min-width: 32px;
      height: 32px;
      padding: 0 4px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      background: white;
      color: #606266;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .page-btn:hover {
      border-color: #409EFF;
      color: #409EFF;
    }
    
    .page-btn.active {
      background: #409EFF;
      color: white;
      border-color: #409EFF;
    }
    
    .upload-dialog {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }
    
    .dialog-content {
      width: 500px;
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
      animation: dialog-fade-in 0.3s;
    }
    
    @keyframes dialog-fade-in {
      from { transform: scale(0.9); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    
    .dialog-header {
      padding: 20px;
      border-bottom: 1px solid #ebeef5;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .dialog-title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
    
    .dialog-close {
      font-size: 18px;
      color: #909399;
      background: none;
      border: none;
      cursor: pointer;
    }
    
    .dialog-body {
      padding: 20px;
    }
    
    .upload-area {
      border: 2px dashed #dcdfe6;
      border-radius: 8px;
      padding: 30px;
      text-align: center;
      transition: all 0.3s;
      cursor: pointer;
    }
    
    .upload-area:hover {
      border-color: #409EFF;
    }
    
    .upload-icon {
      font-size: 48px;
      color: #409EFF;
      margin-bottom: 15px;
    }
    
    .upload-text {
      font-size: 16px;
      color: #606266;
      margin-bottom: 5px;
    }
    
    .upload-hint {
      font-size: 12px;
      color: #909399;
      margin-top: 10px;
    }
    
    .dialog-footer {
      padding: 20px;
      border-top: 1px solid #ebeef5;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    
    .dialog-btn {
      padding: 8px 16px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .dialog-btn.cancel {
      background: white;
      border: 1px solid #dcdfe6;
      color: #606266;
    }
    
    .dialog-btn.confirm {
      background: #409EFF;
      border: 1px solid #409EFF;
      color: white;
    }
    
    /* 适配iPad Air 5 (1180 x 820 for landscape mode) */
    @media (max-width: 1180px) {
      .video-info-panel {
        grid-template-columns: repeat(3, 1fr);
      }
      
      .player-wrapper {
        min-height: 350px;
      }
    }
    
    @media (max-width: 960px) {
      .player-wrapper {
        min-height: 300px;
      }
      
      .video-info-panel {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .system-title {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
      }
      
      .title-center {
        position: relative;
        left: 0;
        transform: none;
        margin-bottom: 10px;
      }
      
      .connection-status {
        margin: 0 auto;
      }
      
      .list-header, .record-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      
      .list-actions, .record-controls {
        width: 100%;
      }
    }
    
    @media (max-width: 768px) {
      .video-info-panel {
        grid-template-columns: 1fr;
      }
      
      .nav-tab {
        padding: 12px;
      }
      
      .nav-tab-text {
        display: none;
      }
      
      .system-title {
        padding: 12px;
      }
      
      .main-title {
        font-size: 20px;
      }
      
      .subtitle {
        font-size: 12px;
      }
      
      .player-wrapper {
        min-height: 250px;
      }
      
      .video-list-wrapper {
        max-height: 300px;
      }
    }
  </style>
</head>
<body>
  <div class="ipad-container">
    <!-- 顶部导航栏 -->
    <div class="nav-tabs">
      <div class="nav-tab" onclick="window.location.href='personal-race.html'">
        <i class="el-icon-data-line nav-tab-icon"></i>
        <span class="nav-tab-text">个人赛</span>
      </div>
      <div class="nav-tab active">
        <i class="el-icon-video-camera nav-tab-icon"></i>
        <span class="nav-tab-text">视频回放</span>
      </div>
    </div>
    
    <!-- 系统标题 -->
    <div class="system-title">
      <div class="connection-status">
        <span class="status-dot"></span>
        <span>系统已连接</span>
      </div>
      
      <div class="title-center">
        <div class="subtitle">轮滑速度过桩</div>
        <h1 class="main-title">视频回放</h1>
      </div>
      
      <div style="width: 130px;"></div> <!-- 平衡布局的占位元素 -->
    </div>
    
    <main class="main-content">
      <!-- 视频播放器区域 -->
      <section class="video-player-section">
        <div class="player-header">
          <div class="player-title">
            <i class="el-icon-video-play"></i>
            视频播放器
          </div>
          <div class="playback-controls">
            <span class="playback-label">播放速度:</span>
            <select class="player-input">
              <option value="0.5">0.5x</option>
              <option value="0.75">0.75x</option>
              <option value="1.0" selected>1.0x</option>
              <option value="1.25">1.25x</option>
              <option value="1.5">1.5x</option>
              <option value="2.0">2.0x</option>
            </select>
          </div>
        </div>
        
        <div class="player-wrapper">
          <video class="video-element" controls>
            <source src="" type="video/mp4">
            您的浏览器不支持视频播放。
          </video>
          
          <!-- 加载中遮罩 -->
          <div class="loading-overlay" style="display: none;">
            <div class="loading-icon"></div>
            <span>视频加载中...</span>
          </div>
          
          <!-- 帧控制 -->
          <div class="frame-controls">
            <button class="frame-btn">
              <i class="el-icon-arrow-left"></i>
            </button>
            <button class="frame-btn">
              <i class="el-icon-arrow-right"></i>
            </button>
          </div>
        </div>
        
        <div class="video-info-panel">
          <div class="info-item">
            <span class="info-label">当前播放:</span>
            <span class="info-value">山海_一_入侵_鬼_畜_(720P).mp4</span>
          </div>
          <div class="info-item">
            <span class="info-label">文件大小:</span>
            <span class="info-value">14.45 MB</span>
          </div>
          <div class="info-item">
            <span class="info-label">创建时间:</span>
            <span class="info-value">2023-05-24 10:23:15</span>
          </div>
        </div>
      </section>
      
      <!-- 视频列表区域 -->
      <section class="video-list-section">
        <div class="list-header">
          <div class="list-title">
            <i class="el-icon-film"></i>
            视频列表
          </div>
          <div class="list-actions">
            <button class="action-btn primary">
              <i class="el-icon-upload"></i>
              上传视频
            </button>
            <button class="action-btn info">
              <i class="el-icon-refresh"></i>
              刷新列表
            </button>
          </div>
        </div>
        
        <div class="record-controls">
          <input type="text" class="player-input" placeholder="请输入选手编号">
          <button class="record-btn">
            <i class="el-icon-video-camera"></i>
            开始记录
          </button>
          <span class="record-tag">上次录制: 001.mp4 (选手001)</span>
        </div>
        
        <div class="video-list-wrapper">
          <!-- 如果没有视频，显示空状态 -->
          <!-- <div class="empty-text">
            <i class="el-icon-video-camera empty-icon"></i>
            <span>暂无视频数据</span>
          </div> -->
          
          <table>
            <thead>
              <tr>
                <th>视频名称</th>
                <th>时长</th>
                <th>大小</th>
                <th>创建时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div class="video-info">
                    <i class="el-icon-video-camera video-icon"></i>
                    <span class="video-name" title="WeChat_20250510210151">WeChat_20250510210151</span>
                  </div>
                </td>
                <td>1:23</td>
                <td>1.76 MB</td>
                <td>2025/3/12</td>
                <td>
                  <div class="video-actions">
                    <button class="video-action-btn">播放</button>
                    <button class="video-action-btn danger">删除</button>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="video-info">
                    <i class="el-icon-video-camera video-icon"></i>
                    <span class="video-name" title="c%3阿里ⁿ&*°。½">c%3阿里ⁿ&*°。½</span>
                    <span class="playing-tag">当前播放</span>
                  </div>
                </td>
                <td>2:45</td>
                <td>11.13 MB</td>
                <td>2025/5/24</td>
                <td>
                  <div class="video-actions">
                    <button class="video-action-btn">播放</button>
                    <button class="video-action-btn danger">删除</button>
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="video-info">
                    <i class="el-icon-video-camera video-icon"></i>
                    <span class="video-name" title="山_海_一_入侵_鬼_畜_(720P).mp4">山_海_一_入侵_鬼_畜_(720P).mp4</span>
                  </div>
                </td>
                <td>5:12</td>
                <td>14.45 MB</td>
                <td>2025/5/24</td>
                <td>
                  <div class="video-actions">
                    <button class="video-action-btn">播放</button>
                    <button class="video-action-btn danger">删除</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <div class="pagination-container">
          <div class="pagination">
            <button class="page-btn">&lt;</button>
            <button class="page-btn active">1</button>
            <button class="page-btn">2</button>
            <button class="page-btn">3</button>
            <button class="page-btn">&gt;</button>
          </div>
        </div>
      </section>
    </main>
    
    <!-- 上传对话框 -->
    <div class="upload-dialog" style="display: none;">
      <div class="dialog-content">
        <div class="dialog-header">
          <h3 class="dialog-title">上传视频</h3>
          <button class="dialog-close">&times;</button>
        </div>
        <div class="dialog-body">
          <div class="upload-area">
            <i class="el-icon-upload upload-icon"></i>
            <div class="upload-text">将视频拖到此处，或<em style="color: #409EFF; font-style: normal;">点击上传</em></div>
            <div class="upload-hint">支持 mp4、mov 等主流视频格式，单个文件不超过 500MB</div>
          </div>
        </div>
        <div class="dialog-footer">
          <button class="dialog-btn cancel">取消</button>
          <button class="dialog-btn confirm">确认上传</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html> 